<template>
 <div class="main">
    <div class="header" @click="centerDialogVisible=true">
        <div style="width: 100%; height: 100%;">
            <img src="../../public/mimages/mi3.png" alt="" width="100%" height="100%">
        </div>  
    </div>
    <div class="center">
        <p class="p1">全新Pro  声升不息</p>
        <p class="p2">这是一个音质跃升的新声代，</p>
        <p class="p2">声学 ⌜Pro⌟ 升级7单元声学配置</p>
        <p class="p2">设计 ⌜Pro⌟ 增加感知灯效</p>
        <p class="p2">体验 ⌜Pro⌟ 成为你全屋音频中心</p>
        <p class="p2">这一次，乐在其中，大有看头</p>
        <p class="p2">送给热爱音乐生活的你</p>
        <div class="p3" @click="httpupto(2)" ><p>查看更多相关商品<i class="el-icon-arrow-right"></i></p></div>
    </div>
    <div class="body">
        <div class="part1">
            <div class="card4"></div>
            <div class="part3">
                <div class="card6"></div>
                <div class="part4">
                    <div class="card7"></div>
                    <div class="card8"></div>
                </div>
            </div>
            <div class="card5"></div>
        </div>
        <div class="part2">
            <div class="card1"></div>
            <div class="card2"></div>
            <div class="card3"></div>
        </div>
    </div>
    <div class="bottom">
        <div class="block">
            <div class="img"><img src="../../public/mimages/xiaomisoundpro09.png" alt=""></div>
            <p>小米妙播</p>
        </div>
        <div class="block">
            <div class="img"><img src="../../public/mimages/xiaomisoundpro10.png" alt=""></div>
            <p>NFC</p>
        </div>
        <div class="block">
            <div class="img"><img src="../../public/mimages/xiaomisoundpro11.png" alt=""></div>
            <p>AUX IN</p>
        </div>
        <div class="block">
            <div class="img"><img src="../../public/mimages/xiaomisoundpro12.png" alt=""></div>
            <p>语音指令</p>
        </div>
        <div class="block">
            <div class="img"><img src="../../public/mimages/xiaomisoundpro13.png" alt=""></div>
            <p>AirPlay 2</p>
        </div>
        <div class="block" style="width: 90px;">
            <div class="img" style="width: 90px;height: 40px; margin: 15px 0 15px 0;"><img src="../../public/mimages/xiaomisoundpro14.png" alt=""></div>
            <p>蓝牙 5.1</p>
        </div>
    </div>
 </div>
</template>

<script>
import axios from 'axios';
export default{
 name: '',
 components: {},
 data(){
    return{
        commodityListvalue:{
            index:0,
            id:0
        },
    }
 },
 methods:{
    httpupto(ins){
        this.commodityListvalue.index = ins
        axios.patch('http://localhost:3001/mishowlistindex/0', this.commodityListvalue).then(()=>{
        this.$router.push('miphone')
                    })
  }
 }
};
</script>

<style scoped lang='less'>
.main{
    height: 1480px;
    width: 100%;
    background: linear-gradient(rgba(12, 2, 18, 0.8),rgba(40, 58, 77, 0.8));
    .header{
    margin-left: 7%;
    width: 85%;
    height:500px;
    }
    .center{
        height: 400px;
        width: 100%;
        background:rgba(255, 255, 255,0);
        text-align: center;
        .p1{
            margin: 60px 0 40px 0;
            font-size: 50px;
            color: burlywood;
        }
        .p2{
            margin: 20px 0 20px 0;
            font-size: 20px;
            color: grey;
        }
        .p3{
            margin-top: 40px;
            font-size: 16px;
            color: rgb(145, 139, 139);
        }
        .p3 :hover{
            color: burlywood;    
        }
    }
    .body{
        width: 738px;
        height: 356px;
        position: relative;
        margin: auto;
        background: rgba(255, 255, 255, 0);
        .part1{
            width: 100%;
            height: 265px;
            .card4{
                width: 248px;
                height: 100%;
                margin-right: 3px;
                background:url('../../public/mimages/xiaomisoundpro.png') no-repeat;
                background-size:contain;
                background-position: center 0;
                float: left;
            }
            .part3{
                width: 285px;
                height: 100%;
                margin: 0 3px 0 3px;
                float: left;
                .card6{
                    width: 285px;
                    height: 130px;
                    margin-bottom: 5px;
                    background:url('../../public/mimages/xiaomisoundpro02.png') no-repeat;
                    background-size:contain;
                    background-position: center 0;
                }
                .part4{
                    width: 285px;
                    height: 130px;
                    .card7{
                        width: 142px;
                        height: 100%;
                        background:url('../../public/mimages/xiaomisoundpro03.png') no-repeat;
                        background-size:contain;
                        background-position: center 0;
                        float: left;
                        position: relative;
                        left: -2px;
                        
                    }
                    .card8{
                        width: 141px;
                        height: 100%;
                        background:url('../../public/mimages/xiaomisoundpro04.png') no-repeat;
                        background-size:contain;
                        background-position: center 0;
                        float: left;
                        position: relative;
                        left: 3px;
                    }
                }

            }
            .card5{
                width: 193px;
                height:100%;
                margin-left: 3px;
                background:url('../../public/mimages/xiaomisoundpro05.png') no-repeat;
                background-size:contain;
                background-position: center 0;
                float: left;
            }
        }
        .part2{
            width: 100%;
            height: 85px;
            margin-top: 6px;
            .card1{
                width: 246px;
                height: 85px;
                margin-right: 3px;
                background:url('../../public/mimages/xiaomisoundpro06.png') no-repeat;
                background-size:contain;
                background-position: center 0;
                float: left;
            }
            .card2{
                width: 142px;
                height: 85px;
                margin: 0 3px 0 3px;
                background:url('../../public/mimages/xiaomisoundpro07.png') no-repeat;
                background-size:contain;
                background-position: center 0;
                float: left;
            }
            .card3{
                width: 338px;
                height: 85px;
                margin-left: 3px;
                background:url('../../public/mimages/xiaomisoundpro08.png') no-repeat;
                background-size:contain;
                background-position: center 0;
                float: left;
            }
        }
    }
    .bottom{
        width: 738px;
        height: 100px;
        position: relative;
        top: 40px;
        margin: auto;
        background: rgba(255, 255, 255, 0);
        padding:  0 40px 0 40px;
        .block{
            width: 80px;
            height: 90px;
            float: left;
            margin: 5px 14px 0 14px;
            .img{
                width: 50px;
                height: 50px;
                margin: 10px 0 10px 14px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                font-size: 16px;
                font-weight: 600;
                color: rgb(144, 139, 139);
                text-align: center;
            }
        }
    }
}
</style>